<script setup>
  import { getHouseDetailApi } from '@/api/home'
  import { OSS_BASE_URL } from '@/contants/home'
  import { useChatStore, useHouseStore, useUserStore } from '@/stores'
  import { onLoad, onShareAppMessage } from '@dcloudio/uni-app'
  import { computed, ref } from 'vue'
  const userStore = useUserStore()
  const chatStore = useChatStore()
  const houseStore = useHouseStore()
  // 房屋朝向 map
  const ROOM_TOWARD_MAP = Object.freeze({
    east: '东',
    south: '南',
    west: '西',
    north: '北'
  })

  // 房屋标签 map
  const ROOM_TAGS_MAP = {
    near_subway: 'ditie',
    civil_water_elec: 'shuidian',
    lift: 'dianti',
    central_heating: 'gongnuan',
    renovation: 'jingzhuangxiu'
  }

  const houseDetail = ref({})

  const markers = computed(() => {
    return houseDetail.value
      ? new Array(1).fill(null).map((item, i) => ({
          id: i + 1,
          iconPath: 'https://bitejiaoyan.oss-cn-chengdu.aliyuncs.com/bitehouse/web/home/weizhi.png',
          longitude: +houseDetail.value.longitude.toFixed(6),
          latitude: +houseDetail.value.latitude.toFixed(6),
          width: 24,
          height: 24,
          anchor: {
            x: 0.5,
            y: 0.5
          }
        }))
      : []
  })

  let houseId = null

  const currentIndex = ref(0)

  const onFinish = (e) => {
    currentIndex.value = e.detail.current
  }

  // 页面加载时
  onLoad((query) => {
    houseId = query.id
    getHouseDetail(houseId)
  })

  async function getHouseDetail(houseId) {
    houseDetail.value = await getHouseDetailApi(houseId)

    text.value = houseDetail.value.intro.split('<br>').join('')
    textyl.value = text.value
    checkTextLength()
  }

  const textyl = ref('')
  const text = ref('')
  const showMore = ref(false)
  const showText = ref(false)
  const textlength = ref(false)

  const checkTextLength = () => {
    if (text.value.length > 75 && !textlength.value) {
      showMore.value = true
      showText.value = false
      text.value = text.value.substring(0, 75) + ' ... '
    } else {
      showText.value = true
      showMore.value = false
      textlength.value = false
      text.value = textyl.value
    }
  }

  const showAll = () => {
    if (showMore.value) {
      textlength.value = true
      checkTextLength()
    }
  }

  const showLeast = () => {
    if (showText.value) {
      textlength.value = false
      checkTextLength()
    }
  }

  // 分享图文
  onShareAppMessage(() => {
    if (!houseId) return
    const { headImage, title } = houseDetail.value
    return {
      title: '比特找房分享',
      path: `/pages/index/detail?id=${houseId}`,
      imageUrl: OSS_BASE_URL + headImage,
      mpid: '',
      desc: title
    }
  })

  // 在线咨询
  const gotoChatPage = () => {
    // 解构房源相关信息
    const { userId, houseId, avatar, title, nickName, headImage, houseType, area, position, price } = houseDetail.value
    // 描述信息
    const desc = `${houseType} · ${area.toFixed(2)}㎡ · 朝${ROOM_TOWARD_MAP[position]}`

    // 设置当前房源信息(便于在聊天页获取)
    houseStore.setCurrentHouse({
      houseId,
      title,
      headImage: OSS_BASE_URL + headImage,
      desc,
      price
    })
    // 存储聊天对象信息
    chatStore.setChatOther({
      id: userId,
      nickName,
      avatar
    })

    // 未登录
    if (!userStore.token) {
      // 先去登录
      return uni.navigateTo({
        url: '/pages/profile/login?redirectUrl=/pages/message/chat'
      })
    }
    // 跳转至聊天页
    uni.navigateTo({
      url: `/pages/message/chat`
    })
  }

  // 打开地图
  const onOpenLocation = () => {
    uni.openLocation({
      latitude: houseDetail.value.latitude,
      longitude: houseDetail.value.longitude,
      name: houseDetail.value.title,
      address: houseDetail.communityName,
      scale: 18
    })
  }
</script>

<template>
  <!-- 自定义顶部导航栏 -->
  <bit-nav-bar title="比特租房" />
  <!-- 可滚动区域 -->
  <scroll-view
    scroll-y
    class="detail"
    :show-scrollbar="false"
    v-if="houseDetail.houseId"
  >
    <!-- banner区域 -->
    <view class="detail-banner">
      <swiper
        autoplay
        circular
        class="detail-banner-swiper"
        @animationfinish="onFinish"
      >
        <swiper-item
          v-for="(url, index) in houseDetail.images"
          :key="index"
        >
          <image
            :src="OSS_BASE_URL + url"
            mode="scaleToFill"
            class="detail-banner-swiper-image"
          />
        </swiper-item>
      </swiper>
      <view class="detail-banner-statics">
        <text>{{ currentIndex + 1 }}</text>
        <text>/</text>
        <text>{{ houseDetail.images.length }}</text>
      </view>
    </view>
    <!-- 详情信息 -->
    <view class="detail-info">
      <!-- 标题 -->
      <view class="detail-info-title title"> {{ houseDetail.title }} </view>
      <!-- 价格 -->
      <view class="detail-info-price">
        <bit-icon color="#ff5c02">&#xe6d1;</bit-icon><text class="detail-info-price-num">{{ houseDetail.price }}</text
        ><text class="detail-info-price-permonth"> /月</text>
      </view>
      <!-- 属性 -->
      <view class="detail-info-property">
        <!-- 主要属性 -->
        <view class="detail-info-property-main">
          <view class="detail-info-property-main-item hx">
            <text class="detail-info-property-main-item-key">户型</text>
            <text class="detail-info-property-main-item-value">{{ houseDetail.houseType }}</text>
          </view>
          <view class="detail-info-property-main-item jzmj">
            <text class="detail-info-property-main-item-key">建筑面积</text>
            <text class="detail-info-property-main-item-value">{{ houseDetail.area }}㎡</text>
          </view>
          <view class="detail-info-property-main-item cx">
            <text class="detail-info-property-main-item-key">朝向</text>
            <text class="detail-info-property-main-item-value">{{ ROOM_TOWARD_MAP[houseDetail.position] }}</text>
          </view>
          <view class="detail-info-property-main-item lc">
            <text class="detail-info-property-main-item-key">楼层</text>
            <text class="detail-info-property-main-item-value"
              >{{ houseDetail.floor }}/{{ houseDetail.allFloor }}层</text
            >
          </view>
        </view>
        <!-- 附加属性 -->
        <view class="detail-info-property-tag">
          <view
            class="detail-info-property-tag-item"
            v-for="item in houseDetail.tags"
            :key="item.tagCode"
          >
            <image
              :src="`https://bitejiaoyan.oss-cn-chengdu.aliyuncs.com/bitehouse/web/home/${ROOM_TAGS_MAP[item.tagCode]}.png`"
              mode="scaleToFill"
              class="detail-info-property-tag-item-image"
            />
            <text class="detail-info-property-tag-item-text">{{ item.tagName }}</text>
          </view>
        </view>
      </view>
      <!-- 位置 -->
      <view class="detail-info-location">
        <view class="detail-info-location-title title"> {{ houseDetail.communityName }} </view>
        <map
          class="detail-info-location-map"
          :latitude="houseDetail.latitude"
          :longitude="houseDetail.longitude"
          :markers="markers"
          @tap="onOpenLocation"
        ></map>
      </view>
      <!-- 介绍 -->
      <view class="detail-info-intro">
        <view class="detail-info-intro-title title"> 房源介绍 </view>
        <view class="detail-info-intro-content">
          <text
            class="text-content"
            @click="showAll"
            user-select
            >{{ text }}
            <text
              class="detail-info-intro-content-btn_more"
              v-if="showMore"
              @click.stop="showAll"
              >查看</text
            >

            <text
              class="detail-info-intro-content-btn_more"
              v-if="showText && !showMore"
              @click.stop="showLeast"
            >
              收起
            </text>
          </text>
        </view>
      </view>
      <!-- 配置 -->
      <view class="detail-info-config">
        <view class="detail-info-config-title title">房屋配置</view>
        <view class="detail-info-config-list">
          <view
            class="detail-info-config-list-item"
            v-for="item in houseDetail.devices"
            :key="item.deviceCode"
          >
            <bit-icon
              size="26"
              color="#231815"
              >&#xe606;</bit-icon
            >
            <text class="detail-info-config-list-item-text">{{ item.deviceName }}</text>
          </view>
        </view>
      </view>
      <!-- 安选验真 -->
      <view class="detail-info-axyz">
        <view class="detail-info-axyz-left">
          <bit-icon></bit-icon>
          <text>安选验真</text>
        </view>
        <text class="detail-info-axyz-right">已通过真实核拍</text>
      </view>
    </view>
  </scroll-view>
  <!-- 底部 分享和在线咨询 -->
  <view class="share-and-consult">
    <view class="main">
      <button
        class="btn-share"
        open-type="share"
        plain
      >
        <view class="btn-share-main">
          <bit-icon
            style="height: 40rpx; margin-bottom: 12rpx"
            color="#333"
            size="36"
            >&#xe67e;</bit-icon
          ><text class="btn-share-main-text">分享</text>
        </view>
      </button>
      <button
        class="btn-consult"
        @click="gotoChatPage"
      >
        在线咨询
      </button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  @import '@/styles/variable.scss';
  @import '@/styles/mixins.scss';
  .detail {
    position: fixed;
    left: 0;
    right: 0;
    top: 176rpx;
    @include bottom-safeArea(114);
    z-index: 3;
    // banner区域
    &-banner {
      position: relative;
      width: 100vw;
      height: 530rpx;
      &-swiper {
        width: 100%;
        height: 100%;
        &-image {
          width: 100%;
          height: 100%;
        }
      }
      &-statics {
        position: absolute;
        right: 30rpx;
        bottom: 60rpx;
        width: 102rpx;
        height: 48rpx;
        line-height: 48rpx;
        background-color: rgba(0, 0, 0, 0.6);
        font-size: var(--font-size-sm);
        border-radius: 27rpx;
        text-align: center;
        color: #fff;
      }
    }
    // 主要信息
    &-info {
      position: relative;
      top: -30rpx;
      box-sizing: border-box;
      padding: 30rpx;
      border-radius: 30rpx 30rpx 0rpx 0rpx;
      background-color: #fff;
      .title {
        font-size: var(--font-size-md);
        font-weight: 600;
        color: var(--text-color-dark);
      }
      &-title {
        font-size: var(--font-size-lg) !important;
      }
      &-price {
        margin: 10rpx 0 20rpx;
        &-num {
          font-size: 42rpx;
          color: #ff5c02;
          font-weight: 600;
        }
        &-permonth {
          font-size: var(--font-size-xs);
          font-weight: 600;
          color: #ff5c02;
        }
      }
      // 属性
      &-property {
        &-main {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 30rpx;
          border-radius: 16rpx;
          background-color: var(--main-bg-color);
          &-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            &-key {
              font-size: var(--font-size-sm);
              color: var(--text-color-light);
            }
            &-value {
              margin-top: 16rpx;
              font-size: var(--font-size-lg);
              color: var(--text-color-dark);
              font-weight: 600;
            }
          }
        }
        &-tag {
          display: flex;
          border-radius: 16rpx;
          margin: 20rpx 0 30rpx;
          &-item {
            width: 158rpx;
            height: 158rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-right: 20rpx;
            border-radius: 16rpx;
            background-color: var(--main-bg-color);
            &:last-child {
              margin-right: 0;
            }
            &-image {
              width: 54rpx;
              height: 54rpx;
            }
            &-text {
              margin-top: 23rpx;
              font-size: var(--font-size-sm);
              color: #333;
            }
          }
        }
      }
      // 位置
      &-location {
        &-title {
          margin: 30rpx 0 20rpx;
        }
        &-map {
          width: 100%;
          height: 260rpx;
          border-radius: 16rpx;
        }
      }
      // 介绍
      &-intro {
        &-title {
          margin: 30rpx 0 20rpx;
        }
        &-content {
          box-sizing: border-box;
          padding: 20rpx;
          border-radius: 16rpx;
          background-color: var(--main-bg-color);
          font-size: var(--font-size-sm);
          line-height: 46rpx;
          color: #333;
          &-btn_more {
            color: var(--text-active-color);
          }
        }
      }
      // 配置
      &-config {
        &-title {
          margin: 30rpx 0 46rpx;
        }
        &-list {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          &-item {
            width: 25%;
            display: flex;
            align-items: center;
            margin-bottom: 20rpx;
            &-text {
              margin-left: 10rpx;
              font-size: var(--font-size-sm);
              color: #333;
            }
          }
        }
      }
      // 安选验真
      &-axyz {
        display: flex;
        align-items: center;
        padding: 24rpx 20rpx;
        border-radius: 16rpx;
        background-color: var(--main-bg-color);
        &-left {
          width: 140rpx;
          height: 36rpx;
          margin-right: 10rpx;
          line-height: 32rpx;
          font-size: var(--font-size-xs);
          border-radius: 2rpx;
          background-color: #22cfff;
          color: #fff;
          text-align: center;
        }
        &-right {
          font-size: var(--font-size-xs);
          font-weight: 600;
          color: var(--text-color-dark);
        }
      }
    }
  }
  .share-and-consult {
    position: fixed;
    left: 0;
    right: 0;
    @include bottom-safeArea;
    width: 100vw;
    height: 114rpx;
    background-color: #fff;
    .main {
      display: flex;
      justify-content: space-between;
      height: 100%;
      align-items: center;
      padding: 0 30rpx;
      .btn-share {
        flex: 1;
        border-color: transparent;
        &-main {
          display: flex;
          flex-direction: column;
          align-items: center;
          &-text {
            width: 44rpx;
            font-size: 22rpx;
            color: #333;
          }
        }
      }
      .btn-consult {
        width: 606rpx;
        height: 80rpx;
        line-height: 80rpx;
        background-image: linear-gradient(to right, #22cfff, #0fa1fe);
        font-size: var(--font-size-md);
        font-weight: 500;
        border-radius: 16rpx;
        color: #fff;
      }
    }
  }
</style>
